﻿<!DOCTYPE HTML />
<html>

<head>
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <!-- fill iPhone screen with canvas -->

    <script type="text/javascript" charset="utf-8" src="randomGen.js"></script>
    <script type="text/javascript" charset="utf-8" src="word.js"></script>
    <title>Pop the Bubbles</title>
        
     <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script>

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);
    var word;
    var can;
    var can2;
    var ctx;
    var ctx2;
    var canX = [];
    var canY = [];
    var position = [];
    var mouseIsDown = 0;
    var len = 0;
    var cool;

    function onDeviceReady() {
        can = document.getElementById("can");
        ctx = can.getContext("2d");
        canvas = document.getElementById("mycanvas");
        context = canvas.getContext("2d");
        context.font = "26pt Calibri";
        context.fillStyle = "blue";
        word = newWord();
        context.fillText(word, 90, 75);

        can.addEventListener("mousedown", mouseDown, false);
        can.addEventListener("mousemove", mouseXY, false);
        can.addEventListener("touchstart", touchDown, false);
        can.addEventListener("touchend", touchUp, false);
        can.addEventListener("touchmove", touchXY, false);
        document.body.addEventListener("mouseup", mouseUp, false);
        document.body.addEventListener("touchcancel", touchUp, false);

        for (i = 0; i < 7; i++) {
            position[i] = 0;
        }
        updateGameBoard();
    }
    function mouseUp() {
        mouseIsDown = 0;
        mouseXY();
    }
    function mouseDown() {
        mouseIsDown = 1;
        mouseXY();
    }
    function touchDown() {
        mouseIsDown = 1;
        touchXY();
    }
    function touchUp(e) {
        if (!e) e = event;
        len = e.targetTouches.length;
        ctx.fillText(len, 0, 0);
    }
    function mouseXY(e) {
        if (!e) e = event;
        canX[0] = e.pageX - can.offsetLeft;
        canY[0] = e.pageY - can.offsetTop;
        len = 1;
    }
    function touchXY(e) {
       if (!e) e = event;
        e.preventDefault();
        len = e.targetTouches.length;
        for (i = 0; i < len; i++) {
            canX[i] = e.targetTouches[i].pageX - can.offsetLeft;
            canY[i] = e.targetTouches[i].pageY - can.offsetTop;
        }
    }

    function updateGameBoard() {
        ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
        ctx.clearRect(0, 0, can.width, can.height);

        // create a path for each bubble

        for (i = 0; i < 7; i++) {

            position[i]++;

            if (position[i] >= can.height + 10)

                position[i] = -10;

            var y = position[i];

            var x = (i + 1) * 45;

            var radius = 20;

            ctx.beginPath();
            ctx.font = "17pt Calibri";
            ctx.fillStyle = "blue";
            ctx.fillText("W", x, y);
            ctx.arc(x, y, radius, 0, 2 * Math.PI);

            ctx.closePath();

            // test each extant touch to see if it is on the bubble

            for (j = 0; j < len; j++) {

                if (ctx.isPointInPath(canX[j], canY[j]) && mouseIsDown)

                    position[i] = -30;

            }

            ctx.stroke();

        }

        setTimeout("updateGameBoard()", 40);

    }

</script>

</head>

<body onload="onDeviceReady()">
        <canvas id="can" height="400" width="310" style="background-color: White"> </canvas>
      <canvas id="mycanvas" height="150" width="310" style="background-color: Fuchsia"></canvas>
    </body>
</html>